import * as React from 'react';
import _ from 'lodash';
import {observer} from 'mobx-react';
declare let UE: any;
declare let GLOBAL: any;

interface UeditorBean {
    height:string;
    visible:boolean; 
    content:string;
    disabled:boolean;
    onChange: Function;
}

@observer
export class UeditorList extends React.Component<UeditorBean,any> {

    uid;

    editor;

    content = '';

    constructor(props) {
        super(props);
        this.uid = _.uniqueId('ueditor_');
    }

    componentDidMount() {
        let me = this;
        me.editor = UE.getEditor(me.uid, {
            serverUrl: GLOBAL.baseApiUrl + '/admin/ueditor',
            //工具栏
            toolbars: [[
                'fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch',
                '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'simpleupload',
                'horizontal', 'date', 'time',
            ]]
            , lang: "zh-cn"
            //字体
            , 'fontfamily': [
                {label: '', name: 'songti', val: '宋体,SimSun'},
                {label: '', name: 'kaiti', val: '楷体,楷体_GB2312, SimKai'},
                {label: '', name: 'yahei', val: '微软雅黑,Microsoft YaHei'},
                {label: '', name: 'heiti', val: '黑体, SimHei'},
                {label: '', name: 'lishu', val: '隶书, SimLi'},
                {label: '', name: 'andaleMono', val: 'andale mono'},
                {label: '', name: 'arial', val: 'arial, helvetica,sans-serif'},
                {label: '', name: 'arialBlack', val: 'arial black,avant garde'},
                {label: '', name: 'comicSansMs', val: 'comic sans ms'},
                {label: '', name: 'impact', val: 'impact,chicago'},
                {label: '', name: 'timesNewRoman', val: 'times new roman'}
            ]
            //字号
            , 'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36]
            , enableAutoSave: false
            , autoHeightEnabled: false
            , initialFrameHeight: me.props.height
            , initialFrameWidth: '100%'
            , readonly: me.props.disabled
        });

        me.editor.ready(function (ueditor) {
            me.editor.addListener("contentChange", function () {
                const content = me.editor.getContent();
                if(me.content !== content){
                    me.content = content;
                    me.props.onChange ? me.props.onChange(me.content) : null;
                }                
            });

            me.editor.setContent(me.props.content ? me.props.content : '<p></p>');
        });
    }

    componentDidUpdate() {
        let me = this;
        me.editor.ready(function (ueditor) {
            if (me.props.visible) {
                let content = me.editor.getContent();
                if(content.length === 0){
                     me.editor.setContent(me.props.content ? me.props.content:'')
                }
            } else {
                me.content = '';
                me.editor.setContent('')
            }
        });
    }

    render() {
        return (
            <script value={this.props.content} id={this.uid} type="text/plain"></script>
        )
    }
}

